<template>
  <div class="mod-user">
    <el-button plain disabled>提现管理</el-button>
    <el-button plain @click="WithdrawalRecord">提现记录</el-button>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <div class="seacrhMoney">
        <el-form-item>
          <div class="balance-searchMoney">
            申请提现时间
            <el-date-picker v-model="value" :clearable='false' type="daterange" value-format="yyyy-MM-dd HH:mm:ss" class="input" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="balance-searchMoney">
            提现状态
            <el-select v-model="value1" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="demand">查询</el-button>
        <el-button type="primary" @click="empty">清空</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item> -->
    </el-form>
    <!-- nav展示 -->
    <div class="nav">
      <div class="money" style="width:24%">
        <div class="moneyLeft">
          <div class="one">
            <span style="font-size: 16px">￥</span>{{ legalWithdrawAmount | MoneyFormat }}
          </div>
          <el-tooltip class="item" effect="dark" content="已结算可提现的总金额（扣除手续费）" placement="top-start">
            <div class="newTitle">
              <div class="two">可提现总金额</div>
              <i name="wenhao" class="el-icon-question wenhao"></i>
            </div>
          </el-tooltip>
        </div>
        <div class="moneyRight">
          <img src="../../assets/img/one.png" alt="" class="moneyImg" />
        </div>
      </div>
      <div class="money" style="width:24%">
        <div class="moneyLeft">
          <div class="one">
            <span style="font-size: 16px">￥</span>{{ legalAlreadyAmount | MoneyFormat }}
          </div>
          <el-tooltip class="item" effect="dark" content="已经提现成功的总金额" placement="top-start">
            <div class="newTitle">
              <div class="two">已提现总金额</div>
              <i name="wenhao" class="el-icon-question wenhao"></i>
            </div>
          </el-tooltip>
        </div>
        <div class="moneyRight">
          <img src="../../assets/img/two.png" alt="" class="moneyImg" />
        </div>
      </div>
      <div class="money" style="width:24%">
        <div class="moneyLeft">
          <div class="one">
            <span style="font-size: 16px">￥</span>{{ legalTotalAmount | MoneyFormat }}
          </div>
          <el-tooltip class="item" effect="dark" content="用户订单支付总金额" placement="top-start">
            <div class="newTitle">
              <div class="two">收款总金额</div>
              <i name="wenhao" class="el-icon-question wenhao"></i>
            </div>
          </el-tooltip>
        </div>
        <div class="moneyRight">
          <img src="../../assets/img/Three.png" alt="" class="moneyImg" />
        </div>
      </div>
      <div class="money" style="width:24%">
        <div class="moneyLeft">
          <div class="one">
            <span style="font-size: 16px">￥</span>{{ legalAwaitAmount | MoneyFormat  }}
          </div>
          <el-tooltip class="item" effect="dark" content="已经结算的总金额（扣除手续费）" placement="top-start">
            <div class="newTitle">
              <div class="two">已结算总金额</div>
              <i name="wenhao" class="el-icon-question wenhao"></i>
            </div>
          </el-tooltip>
        </div>
        <div class="moneyRight">
          <img src="../../assets/img/four.png" alt="" class="moneyImg" />
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div style="
        background-color: #fff;
        margin-top: 16px;
        border-radius: 6px;
        padding: 16px;
      ">
      <div style="
          display: flex;
          margin-bottom: 10px;
          box-sizing: border-box;
        ">
        <el-button v-if="checkedCities.length > 0" type="primary" @click="Application" size="medium" style="margin-bottom: 15px">申请提现</el-button>
        <el-button v-if="checkedCities.length <= 0" type="info" disabled size="medium" style="margin-bottom: 15px">申请提现</el-button>
      </div>
      <el-table :data="dataList" v-loading="dataListLoading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-custom-class="loading_color" style="width: 100%;" @selection-change="checkfod">
        <template slot="empty">
          <img class="machine" src="../../assets/img/machine.svg" alt="" />
          <div style="font-size: 14px; text-align: center">暂无数据</div>
        </template>
        <el-table-column :selectable="selectEnable" type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="cycleNo" header-align="center" align="center" label="结算单号">
          <template slot-scope="scope">
            <div class="cycleNos">
              <div @click="settlement(scope.row.cycleNo)">
                {{ scope.row.cycleNo }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cycleTotalFee" header-align="center" align="center" label="结算金额(元）">
          <template slot-scope="scope">
            <div>{{ scope.row.cycleTotalFee| MoneyFormat }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="settlementTime" header-align="center" align="center" label="结算时间">
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.withdrawStatus === 0" class="blueMoney">
              未提现
            </div>
            <div v-if="scope.row.withdrawStatus === 1" class="orangeMoney">
              审批中
            </div>
            <div v-if="scope.row.withdrawStatus === 2" class="greenMoney">
              已提现
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="withdrawTime" header-align="center" align="center" label="申请提现时间">
        </el-table-column>
        <el-table-column prop="withdrawProposer" header-align="center" align="center" label="提现申请人">
        </el-table-column>
        <el-table-column prop="approverCompanyName" header-align="center" align="center" label="审批单位">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.withdrawStatus != 0" type="text" size="small" :data-id="scope.row.id" @click="addOrUpdateHandle(scope.row.cycleNo)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 提现 -->
    <el-dialog :title="legalCompanyName + '提现申请'" :visible.sync="dialogVisible" width="30%">
      <div>
        <div class="box">
          <div class="left">提现单位：</div>
          <div class="right">{{ legalCompanyName }}</div>
        </div>
        <div class="box">
          <div class="left">法人公司账套编码：</div>
          <div class="right">{{ legalAccountCode }}</div>
        </div>
        <div class="box">
          <div class="left">法人公司名称：</div>
          <div class="right">{{ legalCompanyName }}</div>
        </div>
        <div class="box">
          <div class="left">银行名称：</div>
          <div class="right">{{ bankAccountName }}</div>
        </div>
        <div class="box">
          <div class="left">银行账号：</div>
          <div class="right">{{ bankCardCode }}</div>
        </div>
        <div class="box">
          <div class="left">申请提现金额：</div>
          <div class="right listRig">
            ￥{{ applyWithdrawAmount | MoneyFormat }}
          </div>
        </div>
        <div class="box">
          <div class="left">实际到账金额：</div>
          <div class="right">
            <div class="listRig">￥{{ actualFee | MoneyFormat }}</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="系统设置的手续费，每次提现时收取" placement="top-start">
            <div class="newTitle">
              <div class="leftmargin daFee">提现手续费：</div>
              <div class="daFee">￥ {{ withdrawFee }} </div>
              <i name="wenhao" class="el-icon-question wenhao"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goMoney">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './balanceDetails-add-or-update.vue'
export default {
  inject: ['reload'],
  data () {
    return {
      dataForm: {
        userName: ''
      },
      nickname: '',
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      withdrawAmount: '',
      withdrawStatus: '',
      value: '',
      value1: '',
      checkedCities: [],
      cityOptions: [],
      dialogVisible: false,
      legalAccountCode: '',
      actualFee: '',
      applyWithdrawAmount: '',
      bankAccountName: '',
      bankCardCode: '',
      legalCompanyName: '',
      withdrawFee: '',
      legalAlreadyAmount: '',
      legalAwaitAmount: '',
      legalTotalAmount: '',
      legalWithdrawAmount: '',
      Isvip: 2,
      options: [
        {
          value: '0',
          label: '未提现'
        },
        {
          value: '1',
          label: '审批中'
        },
        {
          value: '2',
          label: '已提现'
        }
      ]
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    this.getDataList()
    this.nickname = localStorage.getItem('nickname')
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/balanceDetail/selectBalanceDetailList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          withdrawTimeStart: this.withdrawTimeStart,
          withdrawTimeEnd: this.withdrawTimeEnd,
          withdrawStatus: this.withdrawStatus,
          cycleNo: this.cycleNo,
          legalAccountCode: this.legalAccountCode
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          this.dataList = data.data.pageInfo.list
          this.totalPage = data.data.pageInfo.total
          this.withdrawAmount = data.data.withdrawAmount

          this.legalAlreadyAmount =
            data.data.legalBalanceAmount.legalAlreadyAmount
          this.legalAwaitAmount = data.data.legalBalanceAmount.legalAwaitAmount
          this.legalTotalAmount = data.data.legalBalanceAmount.legalTotalAmount
          this.legalWithdrawAmount =
            data.data.legalBalanceAmount.legalWithdrawAmount
          // this.awaitAmount = data.data.awaitAmount;
          // this.alreadyAmount = data.data.alreadyAmount;
          // this.totalAmount = data.data.totalAmount;
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.errorMsg)
        }
        this.dataListLoading = false
      })
    },
    //查询
    demand () {
      this.pageIndex = 1
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/balanceDetail/selectBalanceDetailList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          withdrawTimeStart: this.value[0] || '',
          withdrawTimeEnd: this.value[1] || '',
          withdrawStatus: this.value1,
          cycleNo: this.cycleNo,
          legalAccountCode: this.legalAccountCode
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          this.dataList = data.data.pageInfo.list
          this.totalPage = data.data.pageInfo.total
          this.withdrawAmount = data.data.withdrawAmount
          this.legalAlreadyAmount =
            data.data.legalBalanceAmount.legalAlreadyAmount
          this.legalAwaitAmount = data.data.legalBalanceAmount.legalAwaitAmount
          this.legalTotalAmount = data.data.legalBalanceAmount.legalTotalAmount
          this.legalWithdrawAmount =
            data.data.legalBalanceAmount.legalWithdrawAmount
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.errorMsg)
        }
        this.dataListLoading = false
      })
    },
    //清空
    empty () {
      this.value = ''
      this.value1 = ''
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.dataListLoading = true
      this.pageIndex = 1
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/balanceDetail/selectBalanceDetailList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          withdrawTimeStart: this.value[0] || '',
          withdrawTimeEnd: this.value[1] || '',
          withdrawStatus: this.value1,
          cycleNo: this.cycleNo,
          legalAccountCode: this.legalAccountCode
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          this.dataList = data.data.pageInfo.list
          this.totalPage = data.data.pageInfo.total
          this.withdrawAmount = data.data.withdrawAmount
          this.legalAlreadyAmount =
            data.data.legalBalanceAmount.legalAlreadyAmount
          this.legalAwaitAmount = data.data.legalBalanceAmount.legalAwaitAmount
          this.legalTotalAmount = data.data.legalBalanceAmount.legalTotalAmount
          this.legalWithdrawAmount =
            data.data.legalBalanceAmount.legalWithdrawAmount
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.errorMsg)
        }
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/balanceDetail/selectBalanceDetailList'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          withdrawTimeStart: this.value[0] || '',
          withdrawTimeEnd: this.value[1] || '',
          withdrawStatus: this.value1,
          cycleNo: this.cycleNo,
          legalAccountCode: this.legalAccountCode
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          this.dataList = data.data.pageInfo.list
          this.totalPage = data.data.pageInfo.total
          this.withdrawAmount = data.data.withdrawAmount
          this.legalAlreadyAmount =
            data.data.legalBalanceAmount.legalAlreadyAmount
          this.legalAwaitAmount = data.data.legalBalanceAmount.legalAwaitAmount
          this.legalTotalAmount = data.data.legalBalanceAmount.legalTotalAmount
          this.legalWithdrawAmount =
            data.data.legalBalanceAmount.legalWithdrawAmount
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$message.error(data.errorMsg)
        }
        this.dataListLoading = false
      })
    },
    checkfod (e) {
      this.checkedCities = [...new Set(e)]
      console.log(this.checkedCities)
    },
    // 查看详情
    // 查看详情
    addOrUpdateHandle (cycleNo) {
      this.$router.push({
        name: `subFinance-WithdrawalRecord`,
        query: {
          cycleNo: cycleNo
        }
      })
      // this.addOrUpdateVisible = true;
      // this.$nextTick(() => {
      //   this.$refs.addOrUpdate.init(cycleNo);
      // });
    },
    // 申请提现
    Application () {
      this.dataListLoading = true
      var checkedCitiesTow = []
      for (var i = 0; i < this.checkedCities.length; i++) {
        checkedCitiesTow.push(this.checkedCities[i].cycleNo)
      }
      var checkedCities = checkedCitiesTow.toString()
      this.$http({
        url: this.$http.adornUrl('cassadmin/balanceDetail/applyWithdrawDetail'),
        method: 'POST',
        data: this.$http.adornData({
          cycleNos: checkedCities
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          this.dialogVisible = true
          this.legalAccountCode = data.data.legalAccountCode
          this.actualFee = data.data.actualFee
          this.applyWithdrawAmount = data.data.applyWithdrawAmount
          this.bankAccountName = data.data.bankAccountName
          this.bankCardCode = data.data.bankCardCode
          this.legalCompanyName = data.data.legalCompanyName
          this.withdrawFee = data.data.withdrawFee
        } else {
          this.$message.error(data.errorMsg)
        }
        this.dataListLoading = false
      })
    },
    // 提现确认
    goMoney () {
      this.dataListLoading = true
      var checkedCitiesTow = []
      for (var i = 0; i < this.checkedCities.length; i++) {
        checkedCitiesTow.push(this.checkedCities[i].cycleNo)
      }
      var checkedCities = checkedCitiesTow.toString()
      this.$http({
        url: this.$http.adornUrl('cassadmin/balanceDetail/submitWithdraw'),
        method: 'post',
        data: this.$http.adornData({
          cycleNos: checkedCities
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          this.dialogVisible = false
          this.checkedCities = []
          this.$message({
            message: '提现成功',
            type: 'success'
          });
          this.getDataList()
        } else {
          this.$message.error(data.errorMsg);
        }
        this.dataListLoading = false
      })
    },
    // 禁用
    selectEnable (row, rowIndex) {
      if (row.withdrawStatus == 0) {
        return true // 不禁用
      } else {
        return false
      }
    },
    // 结算账单页面
    settlement (cycleNo) {
      this.$router.push({
        name: `subFinance-settlementList`,
        query: {
          cycleNo: cycleNo
        }
      })
    },
    // 提现记录
    WithdrawalRecord () {
      this.$router.push({
        name: `subFinance-WithdrawalRecord`
      })
    }
  }
}
</script>
<style scoped>
.balance-searchMoney {
  display: flex;
  align-items: center;
}
.input {
  flex: 1;
  margin-left: 5px;
}
.nav {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.money {
  min-width: 200px;
  height: 100px;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  border-radius: 6px;
}
.money div {
  color: #333;
}
.one {
  font-size: 20px;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 5px;
}
.money .two {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}
.box {
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: flex-end;
}
.moneyRight {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.box .right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.daFee {
  color: #ff6600;
  margin-right: 5px;
}
.leftmargin {
  margin-left: 10px;
}
.listRig {
  color: #ff6600;
}
.moneyLeft {
  flex: 1;
}
.moneyRight {
  display: flex;
  justify-content: center;
  align-items: center;
}
.moneyImg {
  width: 72px;
  height: 72px;
}
.f16 {
  font-size: 16px;
}
.newTitle {
  font-size: 12px;
}
</style>
